<!DOCTYPE html>
<html lang="en">
<head>
    <title>商家</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <style type="text/css">
        .box-body{
            box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.1);
            padding: 2rem 2rem;
            margin-bottom: 15px;
            margin-left:10px;
            margin-right:10px;
        }
        .text-uppercase{
            font-size: 16px;
            font-weight: 400;
            color:#8c8c8c;
        }
        .font-size-30{
            font-size:20px;
            font-weight: bold;
            padding-left:20px;
        }
        .txt-icon{
            margin-top:-25px;
            margin-right:25px;
            cursor: pointer;
            font-size: 40px;
        }
        .table-box {
            border: 1px solid rgba(0,0,0,.1);
            min-height: 400px;
            margin-bottom: 30px;
        }
        .table-header{
            border-bottom: 1px solid rgba(97, 106, 120, 0.07);
            color: #455a64;
            display: block;
            padding: 1.5rem 1.5rem;
            font-weight: 500;
            font-size:16px;
        }
        .table-body{
            padding: 1.5rem 1.5rem;
        }
        .mb-5 {
            margin-bottom: 5px !important;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
            border-top: 1px solid #f4f4f4;
            padding: 1rem;
            vertical-align: middle;
        }
        .box-radius{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border:3px solid #00a65a;
            text-align: center;
            display: inline-block;
        }
        .box-radius .txt-sort{
            font-size:26px;
            font-weight: 500;
            padding-top:15px;
        }
        .box-radius .txt-font{
            font-size:16px;
        }
        .txt-line{
            color:#fff;
            text-align: center;
            display: inline-block;
            border-top:2px solid #00a65a;
            width:150px;
            position: relative;
            top:-15px;
        }

        @media screen and (min-width:1200px){
            .box-radius{
                width:80px;
                height: 80px;
            }
            .box-radius .txt-sort{
                font-size:20px;
                padding-top:12px;
            }
            .box-radius .txt-font{
                font-size:14px;
            }
        }
        @media screen and (min-width: 960px) and (max-width: 1199px) {
            .box-radius{
                width:80px;
                height: 80px;
            }
            .box-radius .txt-sort{
                font-size:20px;
                padding-top:12px;
            }
            .box-radius .txt-font{
                font-size:14px;
            }
            .txt-line{
                width:120px;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 959px) {
            .box-radius{
                width:60px;
                height: 60px;
            }
            .box-radius .txt-sort{
                font-size:16px;
                padding-top:8px;
            }
            .box-radius .txt-font{
                font-size:12px;
            }
            .txt-line{
                width:80px;
            }
        }
        @media only screen and (min-width: 480px) and (max-width: 767px){
            .box-radius{
                width:60px;
                height: 60px;
            }
            .box-radius .txt-sort{
                font-size:14px;
                padding-top:6px;
            }
            .box-radius .txt-font{
                font-size:12px;
            }
            .txt-line{
                width:30px;
            }
        }
        @media only screen and (max-width: 479px) {
            .box-radius{
                width:54px;
                height: 54px;
            }
            .box-radius .txt-sort{
                font-size:12px;
                padding-top:3px;
            }
            .box-radius .txt-font{
                font-size:12px;
            }
            .txt-line{
                width:5px;
                top:-10px;
            }
            .txt-icon{
                margin-top:-25px;
                margin-right:-10px;
                cursor: pointer;
                font-size: 30px;
            }
        }
        /*@media only screen and (max-width: 400px) {
            .font-size-30{
                color: red;
                position: relative;
                top: -30px;
                left: 50px;
            }
            .txt-icon:first-child{
                margin-top: 10px;
            }

        }*/


    </style>
</head>
<body>
<div id="main" v-cloak class="form-horizontal" style="margin-top: 30px;">
    <!--<div class="row">
        <div class="col-sm-8">
            <div class="form-group">
                <label  class="col-sm-2 control-label" >店铺名称：</label>
                <div class="col-sm-2" style="padding-left: 0px">
                    <template v-for="item in merchant.store" v-if="merchant.store.length>0">
                        <div class="row" style="padding: 8px 2px 0px 2px">
                            <h5  v-html="item.name" class="label label-info" ></h5>
                        </div>
                        &lt;!&ndash;<button  class="btn-default btn-xs" @click="upStoreName(item.id,item.name)">修改</button>&ndash;&gt;
                    </template>
                    <span v-else class="label label-default">暂无</span>
                </div>
                <div class="col-sm-2">
                    <button  class="btn btn-xs btn-primary" @click="addStore" style="float: left">新增</button>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label" >会员等级：</label>
                <div class="col-sm-10">
                    <div v-if="merchant.level != '普通会员'">
                        <span id="name" name="name" class="label label-success" v-html="merchant.level"></span><span v-html="' ( '+merchant.deadline+' )'"></span>
                    </div>
                    <div v-else>
                        <span class="label label-default" style="margin-right: 10px" v-html="merchant.level"></span><button type="button" class="btn btn-sm btn-primary" @click="showMyVIP">马上升级</button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">账户余额：</label>
                <div class="col-sm-10">
                    <lable v-html="merchant.balance"></lable>
                    <button  class="btn-default btn-xs" style="margin-left: 15px" data-toggle="modal" data-target="#chargeModel">充值</button>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">申请待审核：</label>
                <div class="col-sm-10">
                    <lable v-html="merchant.applyList"></lable>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">待缴纳保证金：</label>
                <div class="col-sm-10">
                    <lable v-html="merchant.nobail"></lable>
                </div>
            </div>
        </div>
        <div class="col-sm-4" style="text-align: center;">
            <h4>公告</h4>
            <div id="myCarousel" class="carousel slide">
                &lt;!&ndash; 轮播（Carousel）项目 &ndash;&gt;
                <div class="carousel-inner" style=" border:1px solid #ffcc00;background:#fffff7">
                    <div v-for="(item,index) in noticList"    :class="index==0 ? 'item active' :'item'">
                        <div style="margin: 10px 40px 10px 40px">
                            <h5>{{item.title}}</h5>
                        <span v-html="">{{item.content}}</span>
                        </div>
                    </div>
                </div>
                &lt;!&ndash; 轮播（Carousel）导航 &ndash;&gt;
                <a class="carousel-control left" href="#myCarousel"
                   data-slide="prev"> <span _ngcontent-c2="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
                <a class="carousel-control right" href="#myCarousel"
                   data-slide="next">&rsaquo;</a>
            </div>
            </br>
            </br>
            </br>
            </br>
        </div>
    </div>-->

    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <div class="box box-body">
                <h6 class="text-uppercase">店铺总数</h6>
                <div class="flexbox mt-2">
                    <span class="font-size-30"><lable v-html="merchant.storeNum"></lable></span>
                    <span class="fa fa-plus text-success txt-icon pull-right" @click="addStore"></span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <div class="box box-body">
                <h6 class="text-uppercase">任务待审核数</h6>
                <div class="flexbox mt-2">
                    <span class="font-size-30"><lable v-html="merchant.adminAduit"></lable></span>
                    <span class="fa fa-bank text-info txt-icon pull-right"></span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <div class="box box-body">
                <h6 class="text-uppercase">申请总数</h6>
                <div class="flexbox mt-2">
                    <span class="font-size-30"><lable v-html="merchant.applyList"></lable></span>
                    <span class="fa fa-shopping-basket text-danger txt-icon pull-right">

                    </span>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
            <div class="box box-body">
                <h6 class="text-uppercase">历史任务数</h6>
                <div class="flexbox mt-2">
                    <span class="font-size-30"><lable v-html="merchant.completeList"></lable></span>
                    <span class="fa fa-th-large text-warning txt-icon pull-right">

                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <div class="table-box">
                <div class="table-header">
                    <span>会员中心</span>
                </div>
                <div class="table-responsive table-body">
                    <table class="table table-hover mb-5">
                        <thead>
                        <tr>
                            <th>用户名称</th>
                            <th>会员等级</th>
                            <th>有效期限</th>
                            <th>账户余额</th>
                            <th>申请待审核</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in merchant.store" v-if="merchant.store.length>0">
                            <td>
                                <span  v-html="item.name" class="span-txt"></span>
                                <span v-else class="label label-default">暂无</span>
                            </td>
                            <td>
                                <div v-if="merchant.level != '普通会员'">
                                    <span id="name" name="name" class="label label-success" v-html="merchant.level"></span>
                                </div>
                                <div v-else>
                                    <span class="label label-default" style="margin-right: 10px" v-html="merchant.level"></span><button type="button" class="btn btn-sm btn-primary" @click="showMyVIP">马上升级</button>
                                </div>
                            </td>
                            <td>
                                <span v-html="merchant.deadline"></span>
                            </td>
                            <td>
                                <lable v-html="merchant.balance"></lable>
                            </td>
                            <td>
                                <lable v-html="merchant.applyAduit"></lable>
                            </td>
                            <td>
								<button  class="btn-success btn-xs"  data-toggle="modal" data-target="#chargeModel">充值</button>
                                <button  class="btn-info btn-xs" data-toggle="modal" @click="showWithdraweModel" >提现</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="text-center">
                    <div>
                        <img src="../image/qr.png" alt="" width="150" height="150">
                    </div>
                    <div style="width: 150px;margin: 0 auto; text-align: center;">安卓客户端下载</div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <div class="table-box">
                <div class="table-header">
                    <span style="display: inline-block">最新公告</span>
                </div>
                <div class="table-body">
                    <div id="myCarousel" class="carousel slide">
                        <!-- 轮播（Carousel）项目 -->
                        <div class="carousel-inner">
                            <div v-for="(item,index) in noticList"    :class="index==0 ? 'item active' :'item'">
                                <div style="margin: 10px 40px 10px 40px; font-size:14px; line-height:22px;">
                                    <h5 style="font-size:16px;font-weight:bold;">{{item.title}}</h5>
                                    <div v-html="item.content"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 轮播（Carousel）导航 -->
                        <a class="carousel-control left" href="#myCarousel"
                           data-slide="prev"> <span _ngcontent-c2="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
                        <a class="carousel-control right" href="#myCarousel"
                           data-slide="next">&rsaquo;</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

   <div class="row text-center" style="margin-bottom:30px;">
        <div class="box-radius">
            <div class="txt-sort">01</div>
            <div class="txt-font">商家注册</div>
        </div>
        <div class="txt-line"></div>
        <div class="box-radius">
            <div class="txt-sort">02</div>
            <div class="txt-font">店铺绑定</div>
        </div>
        <div class="txt-line"></div>
        <div class="box-radius">
            <div class="txt-sort">03</div>
            <div class="txt-font">发布任务</div>
        </div>
        <div class="txt-line"></div>
        <div class="box-radius">
            <div class="txt-sort">04</div>
            <div class="txt-font">活动上线</div>
        </div>
        <div class="txt-line"></div>
        <div class="box-radius">
            <div class="txt-sort">05</div>
            <div class="txt-font">用户申请</div>
        </div>
    </div>

    <!--  新增店铺弹出页 开始-->
    <button data-toggle="modal" data-target="#myModal" style="display:none" id="showModel"></button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        店铺完善
                    </h4>
                </div>
                <div class="modal-body">
                    <label v-html="'名称：'+oldStoreName" v-if="oldStoreName !=''"></label>
                    <input type="text" class="form-control" v-model="addStoreName" placeholder="请输入店铺名称"  required>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeStore">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="subStoreName">
                        办理
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--  新增店铺弹出页 结束-->
    <!--   会员办理 开始-->
    <button data-toggle="modal" data-target="#myVIP" style="display:none" id="showMyVIP"></button>
    <div class="modal fade" id="myVIP" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 1100px;">
            <div class="modal-content" >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" >
                        会员权利
                    </h4>
                </div>
                <div class="modal-body" style="height:550px">
                    <table id="jqGrid"></table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeMyVIP">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="subUserMode">
                        提交
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--   会员办理 结束-->
    <!-- 充值 开始-->
    <div class="modal fade" id="chargeModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width:550px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="chargeClose">
                        &times;
                    </button>
                    <h4 class="modal-title" >
                        充值
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 text-right">
                            <label for="sum" class="control-label" ><img src="/image/alipay.png" style="height: 32px;"/>金额：</label>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            <input type="text" class="form-control" name="sum" id="sum" placeholder="请输入充值金额" required>
                        </div>
                    </div>
                    <div class="row text-center">
                            <span>*注:手续费1%（最低2元，手续费由支付宝收取，新试界不收取任何充值手续费）</span></br>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeCharge">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="subCharge">
                        充值
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 充值 结束-->
	<button data-toggle="modal" data-target="#withdraweModel" style="display:none" id="showWithdraweModel"></button>

    <div class="modal fade" id="withdraweModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="withdrawClose">
                        &times;
                    </button>
                    <h4 class="modal-title" >
                        提现
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-3">
                            <label for="sum" class="control-label" ><img src="/image/alipay.png" style="height: 32px;"/>金额：</label>
                        </div>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="withdrawSum" id="withdrawSum" placeholder="请输入提现金额" required>
                        </div>
                    </div>
                    <div class="row">
                            <span>*注:最少提现5元</span></br>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeWithdraw">关闭
                    </button>
                    <button type="button" class="btn btn-primary" @click="subWithdraw">
                       提现
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--  g -->
    </div>
    <div id="addPayType" style="display: none;">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="form-group">
                    <div class="col-sm-2 control-label">类型</div>
                    <div class="col-sm-10">
                       //类型选择
                        <select v-model ="addAccountForm.type">
                            <option value="支付宝" checked="checked">支付宝</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">账号</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control"  placeholder="账号" v-model ="addAccountForm.code"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">真实姓名</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control"  placeholder="真实姓名" v-model ="addAccountForm.realName"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">用户名</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control"  placeholder="用户名" v-model ="addAccountForm.username"/>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

</body>
<style>

    th.ui-th-column div{
        white-space: normal !important;
        height: auto !important;
    }

</style>
<script src="../../js/merchant/merchantmain.js" ></script>
<style>
    .carousel-control.left {

        background-image:none;
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    }
    .carousel-control.right {
        left: auto;
        right: 0;

        background-image:none;
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    }

</style>
</html>
